<template>
  <div>
    <!-- 轮播图区域 -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in lunbotuList" :key="item.src">
        <img :src="item.src" alt="">
      </mt-swipe-item>
    </mt-swipe>

    <!-- 六宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
		                    <img src="images/news.png" alt="">
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
		                    <img src="images/picShare.png" alt="">
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="home/goodslist">
		                    <img src="images/goodsShow.png" alt="">
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="images/feedback.png" alt="">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="images/video.png" alt="">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="images/callme.png" alt="">
		                    <div class="mui-media-body">联系我们</div></a></li>
		            
		        </ul> 
    
  </div>
</template>

<script>
  import { Toast } from 'mint-ui'
  export default {
    data(){
      return {
        lunbotuList: []
      }
    },
    created(){
      this.getLunbotu();
    },
    methods: {
      getLunbotu(){
        // 获取轮播图数据
        this.$axios.get("json/lubotu.json").then(res=>{
          //console.log(res);
          if(res.status === 200){
            this.lunbotuList = res.data;
          }else{
            Toast("加载轮播图失败");
          }
        });
      }
    }
  }
</script>
<style scoped>
.mint-swipe {
  height: 200px;
}
.mint-swipe-item:nth-child(1) {
  background-color: red;
}
.mint-swipe-item:nth-child(2) {
  background-color: blue;
}
.mint-swipe-item:nth-child(3) {
  background-color: cyan;
}
.mui-grid-view.mui-grid-9{
  background-color: #fff;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border: 0;
}
.mui-grid-view.mui-grid-9 img {
  width: 60px;
}
.mui-media-body{
  font-size: 13px;
}

</style>
